<template>
  <div class="print-template-container">
    <el-form>
      <el-row>
        <el-col :span="24">
          <el-button plain type="primary" @click="queryData">
            <el-icon><Search /></el-icon>
            &nbsp;查&nbsp;询
          </el-button>
          <el-button plain type="primary" @click="toAddPrintTemplate">
            <el-icon><Plus /></el-icon>
            &nbsp;新&nbsp;增
          </el-button>
          <el-button plain type="primary" @click="toEditPrintTemplate">
            <el-icon><Edit /></el-icon>
            &nbsp;修&nbsp;改
          </el-button>
        </el-col>
      </el-row>
    </el-form>
    <div style="height: 12px"></div>
    <el-table
      :ref="printTemplateTable"
      :data="state.tableData"
      :header-cell-style="{ textAlign: 'center' }"
      highlight-current-row
      row-key="pkPrintTemplate"
      size="small"
      @current-change="handleCurrentChange"
    >
      <el-table-column label="操作" width="200px">
        <template #default="scope">
          <el-button size="small" @click="handleTest(scope.row, scope.$index)">
            测试
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="模板编码"
        prop="printTemplateCode"
        width="250px"
      />
      <el-table-column label="模板名称" prop="printTemplateName" />
    </el-table>
    <el-pagination
      background
      :current-page="state.paginationParams.pageNum"
      :layout="state.layout"
      :page-size="state.paginationParams.pageSize"
      small
      :total="state.paginationParams.total"
      @current-change="handlePaginationCurrentChange"
      @size-change="handlePaginationSizeChange"
    />
    <DesignDialog ref="designDialogRef" @add-success="addSuccess" />
  </div>
</template>
<script setup>
  import DesignDialog from './modules/designDialog.vue'
  import { Plus, Search, Edit } from '@element-plus/icons-vue'
  import { queryTemp, removePrintTemp } from '@/api/print/index.js'
  import hiPrint from '@/utils/hiPrint.js'
  import { localStorageConfig } from '@/config/localstorage.config'
  const designDialogRef = ref(),
    printTemplateTable = ref(),
    currentRow = ref(),
    pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)
  const $baseMessage = inject('$baseMessage')
  const $baseConfirm = inject('$baseConfirm')
  const state = reactive({
    tableData: [],
    paginationParams: {
      pageNum: 1,
      pageSize: 10,
      total: 0,
    },
    layout: '->,total, sizes, prev, pager, next, jumper',
  })

  const handlePaginationCurrentChange = (...args) => {
    state.paginationParams.pageNum = args[0] ? args[0] : 1
    queryData()
  }
  const handlePaginationSizeChange = (...args) => {
    state.paginationParams.pageSize = args[0] ? args[0] : 10
    state.paginationParams.pageNum = 1
    queryData()
  }

  const handleCurrentChange = (val) => {
    currentRow.value = val
  }

  const queryData = async () => {
    const param = {
      pageNum: state.paginationParams.pageNum,
      pageSize: state.paginationParams.pageSize,
      printTemplateCode: '',
      printTemplateName: '',
      isUse: 0,
      pkCorp,
    }
    const res = await queryTemp(param)
    state.tableData = res.data.list
    state.paginationParams.total = res.data.total
  }
  onMounted(() => {
    queryData()
  })
  const toAddPrintTemplate = () => {
    designDialogRef.value.handleOpen()
  }
  const handleDelete = (row) => {
    $baseConfirm(
      '是否删除',
      null,
      async () => {
        await removePrintTemp(row.pkPrintTemplate)
        $baseMessage('操作成功')
        queryData()
      },
      () => {},
      '确认',
      '取消'
    )
  }
  const toEditPrintTemplate = () => {
    if (!currentRow.value) {
      $baseMessage('请选择需要修改的打印模板')
      return
    }
    designDialogRef.value.handleEditOpen(currentRow.value)
  }
  const addSuccess = () => {
    queryData()
  }
  const handleTest = (row) => {
    hiPrint(row.printTemplateCode, [
      {
        barcode: 'B1',
        supplieName: '华为技术有限公司',
        invName: '右空调出风口总成',
        batchCode: '20241201',
        packnum: '1000',
        boxCode: '1001-1001',
        receiverName: '芜湖福赛科技有限公司',
        receiverAddr: '芜湖市鸠江区梦溪路2号芜湖福赛科技有限公司',
      },
      {
        barcode: 'B2',
        supplieName: '三一重工',
        invName: '左空调出风口总成',
        batchCode: '20241215',
        packnum: '80000',
        boxCode: '1001-1002',
        receiverName: '芜湖福赛科技有限公司',
        receiverAddr: '芜湖市鸠江区梦溪路2号芜湖福赛科技有限公司',
      },
    ])
  }

  // import hiPrint from '@/utils/hiPrint.js'
  // hiPrint('bar_001', [ // 条码模板code
  //   {
  //     barcode: 'B2',
  //     supplieName: '三一重工', // 供应商名称
  //     invName: '左空调出风口总成',
  //     batchCode: '20241215', // 批次号
  //     packnum: '80000',  // 包装数量
  //     boxCode: '1001-1002', //箱号
  //     receiverName: '芜湖福赛科技有限公司', // 收货单位名称
  //     receiverAddr: '芜湖市鸠江区梦溪路2号芜湖福赛科技有限公司', //收货单位地址
  //   },
  //   ... // 多条批打
  // ])
</script>
